import {Component, Inject, OnInit} from '@angular/core';
import {TopMenu} from '../../../shared/components/scrollable-tab/scrollable-tab.component';
import {ActivatedRoute, Router} from '@angular/router';
import {HomeService, token} from '../../services/home.service';
import {Observable} from 'rxjs';
import {filter, map} from 'rxjs/operators';

@Component({
  selector: 'app-home-container',
  templateUrl: './home-container.component.html',
  styleUrls: ['./home-container.component.css']
})
export class HomeContainerComponent implements OnInit {
  constructor(
    private router: Router,
    private service: HomeService,
    private route: ActivatedRoute,
    @Inject(token) private baseUrl: string
  ) {
  }

  topMenus$: Observable<TopMenu[]>;
  scrollableTabBgColor = 'red';
  selectedTabLink$: Observable<string>;

  ngOnInit(): void {
    this.topMenus$ = this.service.getTabs();
    this.selectedTabLink$ = this.route.firstChild.paramMap
      .pipe(
        filter(params => params.has('tabLink')),
        map(params => params.get('tabLink'))
      );
  }

  handleTabSelected(topMenu: TopMenu): void {
    this.router.navigate(['home', topMenu.link]);
  }
}
